<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<ul class="list"></ul>

<script>

// 需求：动态向list中添加50个li
var list = document.querySelector('.list');

// for (var i = 0; i < 50; i++) {
//     // 创建li元素
//     var li = document.createElement('li');
//     // 给新建的li添加内容
//     li.innerText = 'li ' + (i+1);
//     // 将新建的li添加到list中
//     list.appendChild(li);
// }

// 问题：频繁操作修改DOM会有严重的性能问题
// 解决：减少操作DOM

/* // 创建一个空的容器元素
var wrap = document.createElement('div');
for (var i = 0; i < 50; i++) {
    // 创建li元素
    var li = document.createElement('li');
    // 给新建的li添加内容
    li.innerText = 'li ' + (i+1);
    // 向空容器添加新建的li
    wrap.appendChild(li);
}
// 将wrap容器添加到list中
list.appendChild(wrap); */

// 问题：会产生一个多余的容器元素
// 解决：使用虚拟容器

// 文档碎片
// 文档碎片是一个虚拟节点，是一种轻量级节点，不存在DOM树中
// 文档碎片是一个容器，用来装其他元素节点
// 虚拟节点也可以使用元素节点的各种操作方法，nodeType值为 11
// 文档碎片：用于性能优化，减少操作DOM

// 创建一个文档碎片(虚拟节点)
var wrap = document.createDocumentFragment();
for (var i = 0; i < 50; i++) {
    // 创建li元素
    var li = document.createElement('li');
    // 给新建的li添加内容
    li.innerText = 'li ' + (i+1);
    // 向虚拟节点中添加新建的li
    wrap.appendChild(li);
}
// 将wrap虚拟节点添加到list中
list.appendChild(wrap);


</script>
</body>
</html>